<template>
  <view class="bargain-list bg-gray">
    <cu-custom :isBack="true" :bgColor="'bg-' + theme.backgroundColor">
      <block slot="backText"></block>
      <block slot="content">秒杀专区</block>
    </cu-custom>
    <view class="seckill" v-if="seckillList.length !== 0">
      <scroll-view scroll-x class="nav text-center seckill-time padding-tb-sm bg-blue" scroll-with-animation
        :scroll-left="scrollLeft">
        <view class="navItem flex-sub margin-top-sm" :class="index == TabCur ? 'couColor text-bold' : ''"
          v-for="(item, index) in seckillList" :key="index" @tap="tabSelect($event, item)" :data-id="index">
          <view class="text-df margin-bottom-xs">{{ item.date }}</view>
          <view class="text-df margin-bottom-xs">{{ item.hallTime + ":00" }}</view>
        </view>
      </scroll-view>
      <view class="padding flex justify-between bg-white margin-bottom-sm">
        <view class="text-black text-bold text-df" v-if="outTime == 0">本场已结束</view>
        <view class="text-black text-bold text-df" v-else-if="outTime  < 0">本场暂未开始</view>
        <view class="text-black text-bold text-df" v-else-if="outTime   > 0">本场还剩</view>
        <view><count-down v-if="outTime > 0" :outTime="outTime" :textColor="'black'" @countDownDone="countDownDone"> </count-down></view>
      </view>
      <view class="article no-card">
        <view class="goods-item margin-top" v-for="(item, index) in listSeckillGoodsInfo" :key="index">
          <view class="flex padding-xs padding-bottom align-center padding-top">
            <view class="row-img">
              <image :src="item.picUrl" mode="heightFix" class=""></image>
            </view>
            <view class="margin-left-sm seckill-information">
              <view class="overflow-2 name">{{ item.name }}</view>
              <view class="regmen margin-top-sm padding-right-sm">
                <view class="text-sm margin-bottom-sm">限量 {{item.limitNum}} 件，已售 {{item.seckillNum}} 件</view>
                <view class="cu-progress round progress-bar">
                  <view class="progress_back" :style="'width:' + item.progress + '%'">
                    <text class="margin-left percentage"> {{ item.progress + '%' }} </text>
                  </view>
                </view>
              </view>
              <view class="margin-top-sm buttonBox">
                <image src="../../../static/images/skillButton.png" />
                <view>
                  <view class="flex-sub"> <text
                      class="padding-left-sm text-price text-lg">{{ item.seckillPrice }}</text><text
                      class="padding-left-xs text-price text-xs del">{{ item.goodsSku.salesPrice }}</text> </view>
                  <navigator class=" flex-sub text-center" :url="
                      '../seckill-detail/index?seckillHallInfoId=' +
                      item.seckillHallInfo.id +
                      '&shopId=' +
                      item.shopId
                    " hover-class="none">
                    {{
                      curHour == curSeckillHall.hallTime
                        ? "立即抢购"
                        : "查看详情"
                    }}
                  </navigator>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Empty msg="暂无更多活动" v-else />
  </view>
</template>

<script>
  const util = require("utils/util.js");
  const app = getApp();
  import api from "@/utils/api";
  import countDown from "../../../component/count-down/index";
  import Empty from "@/components/empty/index";

  export default {
    components: {
      countDown,
      Empty
    },
    watch: {
      curHour() { },
    },
    data() {
      return {
        showBg: false, //是否显示背景色
        CustomBar: this.CustomBar,
        theme: app.globalData.theme, //全局颜色变量
        page: {
          searchCount: false,
          current: 1,
          size: 10,
          ascs: "sort",
          //升序字段
          descs: "",
        },
        parameter: {},
        loadmore: true,
        listSeckillGoodsInfo: [], //当前时间场次的秒杀商品集合
        seckillList: [],
        curSeckillHall: {
          //当前会场
        },
        outTime: -1,
        TabCur: 0,
        scrollLeft: 0,
        color: "red",
        loading: false,
        modalName: "",
        active: false,
        curHour: 0, //当前小时
      };
    },

    props: {},

    //页面滑动 监听事件
    onPageScroll(e) {
      if (e.scrollTop > 20) {
        this.showBg = true;
      } else {
        this.showBg = false;
      }
    },
    onShow() { },

    onLoad: function (options) {
      if (options.shopId) {
        this.parameter.shopId = options.shopId;
      }
      this.curHour = this.$moment().format("H");
      app.initPage().then((res) => {
        this.seckillhallList();
      });
      let that = this;
      setTimeout(function () {
        that.loading = true;
      }, 500);
    },

    onReachBottom() {
      if (this.loadmore) {
        this.page.current = this.page.current + 1;
        this.seckillhallList();
      }
    },

    onPullDownRefresh() {
      // 显示顶部刷新图标
      uni.showNavigationBarLoading();
      this.refresh(); // 隐藏导航栏加载框

      uni.hideNavigationBarLoading(); // 停止下拉动作

      uni.stopPullDownRefresh();
    },

    methods: {
      countDownDone() {
        this.seckillhallList();
      },
      seckillhallList() {
        let curDate = this.$moment().format("YYYY-MM-DD");
        // let curDate = '2020-09-11';
        let that = this;
        api.seckillhallList(curDate).then((res) => {
          let seckillList = res.data;
          this.loadmore = false;
          if (seckillList && seckillList.length > 0) {
            let hasSeckill = false;
            this.seckillList = seckillList;
            seckillList.forEach((item, index) => {
              let [year, month, day] = item.hallDate.split("-");
              item.date = `${month}月${day}日`;
              if (item.hallTime == that.curHour) {
                //默认设置当前小时的秒杀时间，如果没有就设置最近时间的秒杀时间
                this.curSeckillHall = item;
                this.TabCur = index;
                this.scrollLeft = index * 60;
                hasSeckill = true;
                this.getSeckillGoodsData(item.id);
                return;
              } else if (!hasSeckill && item.hallTime > that.curHour) {
                //秒杀时间必须大于当前时间
                this.curSeckillHall = item;
                this.TabCur = index;
                this.scrollLeft = index * 60;
                hasSeckill = true;
                this.getSeckillGoodsData(item.id);
                return;
              }
            });
            if (!hasSeckill) {
              this.curSeckillHall = seckillList[0];
              this.getSeckillGoodsData(this.curSeckillHall.id);
            }
            this.setCountDown();
          } else {
            this.seckillList = [];
          }
        });
      },
      setCountDown() {
        // 设置倒计时时间，
        // 如果当前时间大于会场时间，结束
        // 如果当前时间等于，正在进行中
        // 如果小于暂未开始
        if (this.curSeckillHall.hallTime < this.curHour) {
          //计算倒计时多少秒
          this.outTime = 0;
        } else if (this.curSeckillHall.hallTime == this.curHour) {
          //计算倒计时多少秒
          let curDateTime = new Date().getTime(); //当前时间
          let nextHour = Number(this.curHour) + 1;
          let nextDateTime =
            this.curSeckillHall.hallDate + " " + nextHour + ":00:00";
          let timeTemp = this.$moment(nextDateTime).toDate();
          this.outTime = new Date(timeTemp).getTime() - curDateTime; //下一个整点时间
        } else {
          this.outTime = -1;
        }
      },
      tabSelect(e, item) {
        this.curHour = this.$moment().format("H");
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
        console.log(`this.`, this.scrollLeft)
        this.listSeckillGoodsInfo = [];
        if (item) {
          item.listSeckillInfo = item.listSeckillInfo ? item.listSeckillInfo : [];
          this.curSeckillHall = item;
          this.getSeckillGoodsData(item.id);
        } else {
          this.curSeckillHall = {
            listSeckillInfo: [],
            outTime: 0,
          };
        }
        this.setCountDown();
      },
      getSeckillGoodsData(id) {
        api
          .seckillinfoPage(
            Object.assign(
              { seckillHallId: id },
              this.page,
              util.filterForm(this.parameter)
            )
          )
          .then((res) => {
            let listSeckillGoodsInfo = res.data.records;
            listSeckillGoodsInfo.forEach((item, index) => {
              item.progress = (item.seckillNum / item.limitNum).toFixed(2) * 100;
            });
            this.listSeckillGoodsInfo = [
              ...this.listSeckillGoodsInfo,
              ...listSeckillGoodsInfo,
            ];
            if (listSeckillGoodsInfo.length < this.page.size) {
              this.loadmore = false;
            }
          });
      },
      refresh() {
        this.loadmore = true;
        this.seckillList = [];
        this.listSeckillGoodsInfo = [];
        this.page.current = 1;
        this.seckillhallList();
      },
    },
  };
</script>
<style>
page{
  background: #ffffff;
}
  .navItem {
    display: inline-block;
    line-height: 30rpx;
    margin: 0 10rpx;
    padding: 0 20rpx;
  }

  .seckill-time {
    min-height: 50px;
  }

  .row-img {
    width: 320rpx !important;
    height: 230rpx !important;
    border-radius: 10rpx;
  }

  .row-img image {
    height: 230rpx !important;
    margin: auto;
    display: block;
  }

  .seckill {
    min-height: 1450rpx;
  }

  .line {
    display: inline-block;
    width: 120rpx;
    border-top: 0.5rpx solid #cccccc;
    vertical-align: 5px;
    opacity: 0.5;
  }

  .goods-item {
    background-color: #ffffff;
    width: 94%;
    margin: auto;
    border-radius: 10rpx;
    margin-bottom: 40rpx;
  }

  .seckill-information {
    width: 320rpx;
  }

  .seckill-image {
    width: 100%;
    height: 683rpx;
    margin-top: -120rpx;
  }
  .couColor{
    color: #ffa51a;
  }
  .progress-bar {
    height: 32rpx;
    background-color: #FFE4BA;
  }

  .progress_back {
    background-color: #ffa51a;
  }

  .percentage {
    color: #ffffff !important;
  }

  .btn-enter {
    width: 580rpx;
    height: 76rpx;
  }

  .text-grey1 {
    color: #666666;
  }

  .name {
    font-size: 28rpx;
    font-weight: 600;
    color: #666666;
    line-height: 40rpx;
  }

  .buttonBox {
    width: 306rpx;
    height: 50rpx;
    position: relative;
    line-height: 50rpx;
  }

  .buttonBox image {
    width: 306rpx;
    height: 50rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .buttonBox view {
    display: flex;
    position: relative;
    z-index: 9;
    color: #ffffff;
    font-size: 24rpx;
  }

  .del {
    text-decoration: line-through;
  }
</style>